<template>
  <view class="conversation-container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">对话交互</text>
      <view class="nav-actions">
        <text class="nav-icon" @click="showSettings">⚙️</text>
      </view>
    </view>

    <!-- 角色信息 -->
    <view class="character-info">
      <image class="character-avatar" src="/static/avatar-placeholder.png" mode="aspectFit"></image>
      <view class="character-details">
        <text class="character-name">{{ currentCharacter.name }}</text>
        <text class="character-mood">心情: {{ currentCharacter.mood }}</text>
      </view>
    </view>

    <!-- 对话区域 -->
    <scroll-view 
      class="message-scroll" 
      scroll-y="true" 
      :scroll-top="scrollTop"
      scroll-with-animation
    >
      <view class="message-container">
        <view 
          v-for="(message, index) in messages" 
          :key="index"
          class="message-item"
          :class="{ 'user-message': message.isUser, 'ai-message': !message.isUser }"
        >
          <view class="message-bubble">
            <text class="message-text">{{ message.text }}</text>
            <text class="message-time">{{ message.time }}</text>
          </view>
          <view class="message-avatar">
            <text v-if="message.isUser" class="avatar-icon">👤</text>
            <text v-else class="avatar-icon">🤖</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <view class="input-container">
        <input 
          v-model="inputText" 
          class="message-input" 
          placeholder="和角色聊天..."
          placeholder-class="placeholder"
          @confirm="sendMessage"
        />
        <view class="input-actions">
          <text class="action-icon" @click="toggleEmoji">😊</text>
          <text class="action-icon" @click="sendMessage">➤</text>
        </view>
      </view>

      <!-- 表情选择器 -->
      <view v-if="showEmojiPicker" class="emoji-picker">
        <view class="emoji-grid">
          <text 
            v-for="emoji in emojis" 
            :key="emoji"
            class="emoji-item"
            @click="addEmoji(emoji)"
          >{{ emoji }}</text>
        </view>
      </view>

      <!-- 快速回复 -->
      <view class="quick-replies">
        <text 
          v-for="reply in quickReplies" 
          :key="reply"
          class="quick-reply"
          @click="selectQuickReply(reply)"
        >{{ reply }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCharacter: {
        name: '樱花酱',
        mood: '开心',
        avatar: '/static/avatar-placeholder.png'
      },
      messages: [
        {
          text: '你好！我是樱花酱，很高兴认识你！今天想聊些什么呢？',
          isUser: false,
          time: '10:00'
        }
      ],
      inputText: '',
      showEmojiPicker: false,
      scrollTop: 0,
      emojis: ['😊', '😂', '🥰', '😍', '🤔', '😎', '🥺', '❤️', '✨', '🌟'],
      quickReplies: [
        '你好！',
        '今天过得怎么样？',
        '能讲个故事吗？',
        '有什么推荐？'
      ]
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    showSettings() {
      uni.showModal({
        title: '对话设置',
        content: '调整对话参数和角色性格',
        showCancel: false
      })
    },
    sendMessage() {
      if (!this.inputText.trim()) return

      // 添加用户消息
      const userMessage = {
        text: this.inputText,
        isUser: true,
        time: this.getCurrentTime()
      }
      this.messages.push(userMessage)

      const userInput = this.inputText
      this.inputText = ''

      // 滚动到底部
      this.$nextTick(() => {
        this.scrollToBottom()
      })

      // 模拟AI回复
      setTimeout(() => {
        const aiResponse = this.generateAIResponse(userInput)
        this.messages.push({
          text: aiResponse,
          isUser: false,
          time: this.getCurrentTime()
        })
        
        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }, 1000)
    },
    generateAIResponse(input) {
      const responses = [
        '很有趣的话题呢！让我想想...',
        '哇，这个问题很有意思！',
        '作为动漫角色，我觉得...',
        '从二次元的角度来看...',
        '让我用动漫的方式来回答你...'
      ]
      
      if (input.includes('你好') || input.includes('hi') || input.includes('hello')) {
        return '你好呀！今天天气真不错，适合聊些有趣的话题呢！'
      } else if (input.includes('故事')) {
        return '让我给你讲个有趣的动漫故事吧！从前有一个勇敢的少年...'
      } else if (input.includes('推荐')) {
        return '我推荐你看《你的名字》这部动漫电影，画面和故事都很美！'
      } else {
        return responses[Math.floor(Math.random() * responses.length)] + ' ' + input + ' 这个话题让我想到了很多动漫情节呢！'
      }
    },
    toggleEmoji() {
      this.showEmojiPicker = !this.showEmojiPicker
    },
    addEmoji(emoji) {
      this.inputText += emoji
      this.showEmojiPicker = false
    },
    selectQuickReply(reply) {
      this.inputText = reply
      this.sendMessage()
    },
    getCurrentTime() {
      const now = new Date()
      return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
    },
    scrollToBottom() {
      this.scrollTop = 99999
    }
  },
  mounted() {
    this.scrollToBottom()
  }
}
</script>

<style scoped>
.conversation-container {
  height: 100vh;
  background: linear-gradient(135deg, #FFE4E6, #F8F8FF);
  display: flex;
  flex-direction: column;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 20rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
}

.nav-back {
  padding: 15rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #FF69B4;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.nav-actions {
  padding: 15rpx;
}

.nav-icon {
  font-size: 28rpx;
}

.character-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.8);
  margin: 0 30rpx 20rpx;
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
}

.character-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #FFE4E6;
  margin-right: 20rpx;
}

.character-details {
  flex: 1;
}

.character-name {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.character-mood {
  font-size: 22rpx;
  color: #FF69B4;
}

.message-scroll {
  flex: 1;
  padding: 0 30rpx;
}

.message-container {
  padding: 20rpx 0;
}

.message-item {
  display: flex;
  margin-bottom: 30rpx;
}

.user-message {
  justify-content: flex-end;
}

.ai-message {
  justify-content: flex-start;
}

.message-bubble {
  max-width: 70%;
  padding: 25rpx;
  border-radius: 25rpx;
  position: relative;
}

.user-message .message-bubble {
  background: linear-gradient(135deg, #FF69B4, #FF1493);
  color: white;
  border-bottom-right-radius: 8rpx;
}

.ai-message .message-bubble {
  background: white;
  color: #333;
  border-bottom-left-radius: 8rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.message-text {
  font-size: 26rpx;
  line-height: 1.5;
}

.message-time {
  display: block;
  font-size: 20rpx;
  opacity: 0.7;
  margin-top: 10rpx;
}

.message-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #FFE4E6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 15rpx;
}

.avatar-icon {
  font-size: 24rpx;
}

.input-area {
  padding: 30rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
}

.input-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 25rpx;
  padding: 15rpx 25rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.message-input {
  flex: 1;
  font-size: 26rpx;
  padding: 15rpx 0;
}

.placeholder {
  color: #999;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.action-icon {
  font-size: 28rpx;
  padding: 10rpx;
}

.emoji-picker {
  background: white;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-top: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15rpx;
}

.emoji-item {
  font-size: 28rpx;
  text-align: center;
  padding: 15rpx;
  border-radius: 10rpx;
  background: #F8F8FF;
}

.emoji-item:active {
  background: #FFE4E6;
}

.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-top: 20rpx;
}

.quick-reply {
  background: #FFE4E6;
  color: #FF69B4;
  padding: 15rpx 25rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  border: 2rpx solid transparent;
}

.quick-reply:active {
  background: #FF69B4;
  color: white;
}
</style>